{% extends "base.html" %}

{% block title %}密码分享 - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-6 mx-auto">
        <div class="card border-0 shadow-lg">
            <div class="card-header bg-info text-white text-center">
                <h4 class="mb-0">
                    <i class="fas fa-share-alt me-2"></i>
                    密码分享
                </h4>
            </div>
            
            <div class="card-body p-4">
                <!-- 安全提示 -->
                <div class="alert alert-warning border-0 mb-4">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle fa-lg"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="alert-heading">安全提醒</h6>
                            <p class="mb-0 small">
                                此密码信息已被分享给您，请妥善保管。建议您尽快修改密码并删除此分享链接。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 密码信息 -->
                <div class="password-info">
                    <div class="mb-3">
                        <label class="form-label fw-bold">网站/服务</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-globe"></i>
                            </span>
                            <input type="text" class="form-control" value="{{ password_info.url }}" readonly>
                            {% if password_info.url.startswith('http') %}
                            <a href="{{ password_info.url }}" target="_blank" class="btn btn-outline-primary">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">账号/用户名</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-user"></i>
                            </span>
                            <input type="text" class="form-control" value="{{ password_info.account }}" readonly>
                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ password_info.account }}', this)">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">密码</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-key"></i>
                            </span>
                            <input type="password" class="form-control font-monospace" id="passwordField" value="{{ password_info.password }}" readonly>
                            <button class="btn btn-outline-secondary" type="button" onclick="togglePassword()">
                                <i class="fas fa-eye" id="eyeIcon"></i>
                            </button>
                            <button class="btn btn-outline-success" type="button" onclick="copyToClipboard('{{ password_info.password }}', this)">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    {% if password_info.description %}
                    <div class="mb-3">
                        <label class="form-label fw-bold">备注说明</label>
                        <div class="form-control bg-light" style="min-height: 60px;">
                            {{ password_info.description }}
                        </div>
                    </div>
                    {% endif %}
                </div>
                
                <!-- 分享信息 -->
                <div class="mt-4 pt-3 border-top">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="text-muted small">访问次数</div>
                            <div class="h5 mb-0 text-info">{{ password_info.access_count }}</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small">分享时间</div>
                            <div class="small mb-0">{{ password_info.created_at[:19] }}</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card-footer bg-light text-center">
                <small class="text-muted">
                    <i class="fas fa-shield-alt me-1"></i>
                    由 {{ company_name }} 安全分享
                </small>
            </div>
        </div>
        
        <!-- 使用建议 -->
        <div class="alert alert-info border-0 shadow-sm mt-4">
            <h6 class="alert-heading">
                <i class="fas fa-lightbulb me-2"></i>
                安全使用建议
            </h6>
            <ul class="mb-0 small">
                <li>请在安全的环境中查看此密码信息</li>
                <li>建议您登录后立即修改密码</li>
                <li>不要在公共场所或不安全的网络环境中使用</li>
                <li>使用完毕后请清除浏览器历史记录</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function togglePassword() {
    const passwordField = document.getElementById('passwordField');
    const eyeIcon = document.getElementById('eyeIcon');
    
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        eyeIcon.className = 'fas fa-eye-slash';
    } else {
        passwordField.type = 'password';
        eyeIcon.className = 'fas fa-eye';
    }
}

function copyToClipboard(text, button) {
    navigator.clipboard.writeText(text).then(function() {
        // 显示复制成功提示
        const originalHTML = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check"></i>';
        button.classList.remove('btn-outline-secondary', 'btn-outline-success');
        button.classList.add('btn-success');
        
        setTimeout(function() {
            button.innerHTML = originalHTML;
            button.classList.remove('btn-success');
            if (originalHTML.includes('fa-copy')) {
                button.classList.add('btn-outline-success');
            } else {
                button.classList.add('btn-outline-secondary');
            }
        }, 2000);
    }).catch(function(err) {
        console.error('复制失败:', err);
        alert('复制失败，请手动选择复制');
    });
}
</script>
{% endblock %}

{% block extra_css %}
<style>
.password-info .form-control {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.font-monospace {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}

.card {
    border-radius: 15px;
    overflow: hidden;
}

.alert {
    border-radius: 10px;
}

.input-group .btn {
    border-left: 0;
}

.input-group .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
</style>
{% endblock %}